.spirit_icon_pro,.spirit_icon_pro_s {
    width: 60px;
    height: 60px;
    background-size: 100% auto;
    display: block;
    cursor: pointer;
}

.spirit_icon_pro:hover {
    animation: spirit_icon_pro 0.4s steps(16) forwards;
}

.spirit_icon_pro:not(:hover) {
    animation: spirit_icon_reverse_pro 0.4s steps(16) forwards;
}

@keyframes spirit_icon_pro {
    from {
        background-position-y: 0;
    }

    to {
        background-position-y: -960px;
    }
}

@keyframes spirit_icon_reverse_pro {
    from {
        background-position-y: -960px;
    }
    to {
        background-position-y: 0;
    }
}

/*动态图标*/
/*使用方式：<i class="spirit_icon_pro p_cloud"/>*/
.p_cloud {
    background-image: url("@/assets/icons/spirit_icons_pro/Cloud.png")
}
.p_clock {
    background-image: url("@/assets/icons/spirit_icons_pro/Clock.png")
}
.p_cloud_video {
    background-image: url("@/assets/icons/spirit_icons_pro/CloudVideo.png")
}

.p_code {
    background-image: url("@/assets/icons/spirit_icons_pro/Code.png")
}
.p_data {
    background-image: url("@/assets/icons/spirit_icons_pro/Data.png")
}
.p_education {
    background-image: url("@/assets/icons/spirit_icons_pro/Education.png")
}

.p_home {
    background-image: url("@/assets/icons/spirit_icons_pro/Home.png")
}

.p_link {
    background-image: url("@/assets/icons/spirit_icons_pro/Link.png")
}

.p_lock {
    background-image: url("@/assets/icons/spirit_icons_pro/Lock.png")
}

.p_medicine {
    background-image: url("@/assets/icons/spirit_icons_pro/Medicine.png")
}

.p_menu {
    background-image: url("@/assets/icons/spirit_icons_pro/Menu.png")
}

.p_pay {
    background-image: url("@/assets/icons/spirit_icons_pro/Pay.png")
}

.p_plane {
    background-image: url("@/assets/icons/spirit_icons_pro/Plane.png")
}

.p_record {
    background-image: url("@/assets/icons/spirit_icons_pro/Record.png")
}

.p_robot {
    background-image: url("@/assets/icons/spirit_icons_pro/Robot.png")
}

.p_sale {
    background-image: url("@/assets/icons/spirit_icons_pro/Sale.png")
}

.p_service {
    background-image: url("@/assets/icons/spirit_icons_pro/Service.png")
}

.p_share {
    background-image: url("@/assets/icons/spirit_icons_pro/Share.png")
}

.p_target {
    background-image: url("@/assets/icons/spirit_icons_pro/Target.png")
}

.p_translation {
    background-image: url("@/assets/icons/spirit_icons_pro/Translation.png")
}

.p_user {
    background-image: url("@/assets/icons/spirit_icons_pro/User.png")
}

/*静态图标*/
/*使用方式：<i class="spirit_icon_pro_s ps_control"/>*/
.ps_control {
    background-image: url("@/assets/icons/spirit_icons_pro/static/Control.png")
}

.ps_cvm {
    background-image: url("@/assets/icons/spirit_icons_pro/static/Cvm.png")
}

.ps_diversify {
    background-image: url("@/assets/icons/spirit_icons_pro/static/Diversify.png")
}

.ps_globe {
    background-image: url("@/assets/icons/spirit_icons_pro/static/Globe.png")
}

.ps_lock {
    background-image: url("@/assets/icons/spirit_icons_pro/static/Lock.png")
}

.ps_menu {
    background-image: url("@/assets/icons/spirit_icons_pro/static/Menu.png")
}

.ps_money {
    background-image: url("@/assets/icons/spirit_icons_pro/static/Money.png")
}

.ps_notice {
    background-image: url("@/assets/icons/spirit_icons_pro/static/Notice.png")
}

.ps_pc {
    background-image: url("@/assets/icons/spirit_icons_pro/static/Pc.png")
}

.ps_record {
    background-image: url("@/assets/icons/spirit_icons_pro/static/Record.png")
}

.ps_safe {
    background-image: url("@/assets/icons/spirit_icons_pro/static/Safe.png")
}

.ps_smile {
    background-image: url("@/assets/icons/spirit_icons_pro/static/Smile.png")
}

.ps_stable {
    background-image: url("@/assets/icons/spirit_icons_pro/static/Stable.png")
}

.ps_user {
    background-image: url("@/assets/icons/spirit_icons_pro/static/User.png")
}
